<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: pink;
        }

        div {
            width: 400px;
            height: 350px;
            margin: 0 auto;
            border: 1px solid #000;
            margin-top: 150px;
            text-align: center;
        }

        #btn {
            display: block;
            width: 50px;
            height: 30px;
            background-color: skyblue;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <h1>员工管理系统</h1>
        <form action="" id="myform">
            <label for="">名字：</label><input type="text" id="username" name="username"><br><br>
            <label for="">密码：</label><input type="password" id="userpwd" name="userpwd"><br><br>
            <label for="">班级：</label><input type="text" id="userclass" name="userclass"><br><br>
            <label for="">权限：</label><input type="text" id="type" name="type"><br><br>
            <button id="btn" type="button">登录</button>
        </form>
    </div>
</body>
<script src="./ajax.js"></script>
<script>
    document.cookie = 'no';
    var uname;
    var upwd;
    var uclass;
    var type;
    document.getElementById('username').onblur = function () {
        uname = this.value;
    }
    document.getElementById('userpwd').onblur = function () {
        upwd = this.value;
    }
    document.getElementById('userclass').onblur = function () {
        uclass = this.value;
    }
    document.getElementById('type').onblur = function () {
        type = this.value;
    }
    document.getElementById('btn').onclick = function () {
        var meg = "username=" + uname + "&userpwd=" + upwd + "&userclass=" + uclass + "&type=" + type;
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("post", "http://www.qhdlink-student.top/student/login.php");
        xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xmlHttp.send(meg);
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                var data = xmlHttp.responseText;
                // var jdata = JSON.parse(data);
                if (data === 'ok') {
                    document.cookie = data;
                    location.href = "./pages/manage.html";
                }
                else {
                    alert('no');
                }
            }
        }
    }
</script>

</html>